import {
  ProColumns,
  ProTable,
  ProFormInstance,
} from '@ant-design/pro-components';
import { Modal } from 'antd';
import {useEffect, useRef} from 'react';

export type Props = {
  columns: ProColumns<API.InterfaceInfo>[];
  onCancel: () => void;
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  visible: boolean;
  values: API.InterfaceInfo;
}

const UpdateModal: React.FC<Props> = (props) => {
  const { values, visible, columns, onCancel, onSubmit } = props;
  const formRef = useRef<ProFormInstance>();
  useEffect(() =>{
    if (formRef) {
      formRef.current?.setFieldsValue(values);
    }
  }, [values]);

  return (
   <Modal visible={visible} footer={null} onCancel={() => onCancel?.()}>
    <ProTable type='form' formRef={formRef} columns={columns} onSubmit={async (value) => {
      onSubmit?.(value);
    }}></ProTable>
   </Modal>
  );
};

export default UpdateModal;
